<template>
  <div>
    <div id="container"></div>
    <div class="input-card">
      <h4>电子围栏绘制</h4>
      <div class="input-item">
        <input
          type="button"
          class="btn"
          value="开始绘制"
          id="start"
          @click="startDrawPolygon()"
        />
      </div>
      <div class="input-item">
        <input
          type="button"
          class="btn"
          value="结束并保存"
          id="resume"
          @click="stopAndSave()"
        />
      </div>
      <div class="input-item">
        <input
          type="button"
          class="btn"
          value="回显"
          id="appearance"
          @click="show()"
        />
      </div>
      <div class="input-item">
        <input
          type="button"
          class="btn"
          value="结束编辑"
          id="end"
          @click="endEditor()"
        />
      </div>
    </div>
  </div>
</template>
  <script>
import { saveFenceData } from "@/api/fence/manage";
export default {
  mounted() {
    this.$nextTick(() => {
      this.initMap();
    });
    this.row = JSON.parse(this.$route.query.row);
    // console.log(this.row);
    this.id = this.row.id;
  },
  data() {
    return {
      row: {},
      id: null,
      map: null,
      mouseTool: null,
      polyType: {
        strokeColor: "#FF33FF",
        strokeOpacity: 1,
        strokeWeight: 4,
        strokeOpacity1: 0.2,
        fillColor: "#1791fc",
        fillOpacity: 0.4,
        strokeStyle: "solid",
      },
      polygonList: [],
      savedPolygon: [],
      polygonItem: "",
      polyEditorBefore: [],
      polygons: "",
      paths: [],
      marker: null,
      isInsideFence: false,
    };
  },
  methods: {
    initMap() {
      this.map = new AMap.Map("container", {
        resizeEnable: true,
        center: [114.459779, 38.087936],
        zoom: 16,
      });
    },
    startDrawPolygon() {
      this.clearPolygon();
      let __this = this;
      this.map.plugin("AMap.MouseTool", function () {
        __this.mouseTool = new AMap.MouseTool(__this.map);
      });
      this.mouseTool.polygon(this.polyType);
      //监听draw事件可获取画好的覆盖物
      this.polygonList = [];
      this.mouseTool.on("draw", function (e) {
        __this.polygonList.push(e.obj);
        console.log("绘制的多边形", __this.polygonList);
        __this.mouseTool.close();
      });
    },
    stopAndSave() {
      // this.mouseTool.close();
      let savedPolygon = [];
      for (let i = 0; i < this.polygonList.length; i++) {
        console.log(this.polygonList[i].getOptions());
        let op = this.polygonList[i].getOptions();
        let routePath = [];
        op.path.forEach((item) => {
          routePath.push([item.lng, item.lat]);
        });
        let param = {};
        param.path = JSON.stringify(op.path);
        param.id = this.id;
        saveFenceData(param).then((res) => {
          alert("保存成功");
          this.$router.push("fence");
        });
        let savearr = {
          path: routePath,
          strokeColor: op.strokeColor,
          strokeOpacity: op.strokeOpacity,
          fillOpacity: op.fillOpacity,
          fillColor: op.fillColor,
          zIndex: op.zIndex,
        };
        this.savedPolygon.push(savearr);
      }
    },
    // 回显多边形
    show() {
      let fencePath = JSON.parse(this.row.path);
      this.polygons = new AMap.Polygon({
        path: fencePath,
        strokeColor: "#FF33FF",
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.2,
        fillColor: "#1791fc",
        zIndex: 50,
      });
      this.map.add(this.polygons);
      // 缩放地图到合适的视野级别s
      this.map.setFitView([this.polygons]);
      //回显后可以进行编辑
      this.polyEditorBefore = new AMap.PolyEditor(this.map, this.polygons);
      this.polyEditorBefore.open();
    },
    clearPolygon() {
      // this.map.remove(this.polygonList);
      this.polygonList = [];
      this.map.clearMap(); // 清除地图上的所有覆盖物
    },
    //结束编辑
    endEditor() {
      let polygonItem = this.polygons.getPath();
      console.log(polygonItem);
      let paths = []; //编辑的路径
      polygonItem.forEach((v) => {
        paths.push([v.lng, v.lat]);
      });
      this.paths = paths;
      let param = {};
      param.path = JSON.stringify(this.paths);
      console.log(param.path);
      param.id = this.id;
      saveFenceData(param).then((res) => {
        alert("保存成功");
        this.$router.push("fence");
      });
    }
  },
};
</script>
  <style scoped>
@import url("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");
#container {
  width: 100%;
  height: 500px;
}

.input-card .btn {
  margin-right: 1.2rem;
  width: 9rem;
}

.input-card .btn:last-child {
  margin-right: 0;
}
</style>
